<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #c7c7c8;
        }

        .box {
            position: relative;

            /* display: flex; */
            width: 200px;
            height: 921px;
            background-color: #353942;
            text-align: center;
            float: left;
            position: relative;
        }

        .box .fist_box {
            width: 200px;
            height: 80px;
            border-bottom: #78787a 1px solid;
        }

        .fist_box .ming {
            text-align: center;
            line-height: 80px;
            color: #fff;
            font-size: 26px;
        }

        .t_box {
            width: 200px;
            height: 80px;
            border-bottom: #78787a 1px solid;
        }

        .t_box span {
            line-height: 80px;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }

        ul li {
            width: 200px;
            height: 50px;
            color: #fff;
            font-size: 18px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        P {
            width: 200px;
            height: 80px;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        .shou {
            position: relative;
            width: 1300px;
            height: 80px;
            /* border: 1px solid #000; */
            float: left;
        }

        .tu {
            width: 1300px;
            height: 440px;
            /* border: 1px solid red; */
            float: left;

        }

        #container {
            position: relative;
            margin-left: 20px;
            /* display: flex; */
            position: relative;
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            background-color: #fff;
            float: left;
        }

        #right {
            position: relative;

            /* display: flex; */
            /* position: relative; */
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            background-color: #fff;
            float: left;
            margin-left: 50px;
        }

        .name {
            background-color: blue;
        }

        .list {
            background-color: #78787a;
        }

        .shou span {
            display: flex;
            color: #78787a;
            float: left;
            margin-left: 20px;
            font-size: 26px;
            line-height: 80px;
        }

        .shou input {
            width: 200px;
            height: 30px;
            margin-top: 25px;
            margin-left: 20px;
            border-radius: 5px;
        }

        .shou button {
            width: 100px;
            height: 30px;
            font-size: 16px;
        }

        .xuan {
            position: relative;
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            float: left;
            margin-left: 20px;
            background-color: #fff;
        }

        .xuan span {
            font-size: 26px;
            margin: 10px;
        }

        .xuan table tr th {
            max-width: 300px;
            min-width: 150px;
            /* background-color: #fff; */
        }

        .xuan table tr th:first-child,
        .xuan table tr td:first-child {
            text-align: left;
        }

        table {
            width: 600px;
            height: 370px;
            /* background-color: #fff; */
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="fist_box">
            <span class="ming">AdminLTE 3</span>
            <!-- <span>Alexander Prierce</span> -->
        </div>
        <div class="t_box">
            <span>Alexander Prierce</span>

        </div>
        <ul>
            <li class="name">Dashboard</li>
            <li>Dashboard v1</li>
            <li>Dashboard v2</li>
            <li class="list">Dashboard v3</li>
            <li>Widgets</li>
            <li>Charts</li>
            <li>UI Elements</li>
            <li>Forms</li>
            <li>Tables</li>
        </ul>
        <!-- <div class="s_box"> -->
        <p>EXAMPLES</p>
        <!-- </div> -->
        <ul>
            <li>Calender</li>
            <li>Mailbox</li>
            <li>Pages</li>
            <li>Extras</li>
        </ul>
    </div>
    <div class="shou">
        <span>Home</span>
        <span>Contact</span>
        <input type="text" placeholder="search">
        <button>SEARCH</button>

    </div>
    <div class="tu">
        <div id="container"></div>
        <div id="right"></div>

    </div>
    <div class="xuan">
        <span>Products</span>
        <table>
            <thead>
                <tr>
                    <th>Products</th>
                    <th>Price</th>
                    <th>Sales</th>
                    <th>More</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>

</html>
<script src="./promise-ajax.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./mockdata.js"></script>

<script>
    var con = document.querySelector('#container');
    var e = echarts.init(con);
    e.setOption({
        title: { //图表的标题
            text: 'Dashboard v3',
            left: 'left',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            data: ["18th", "20th", "22nd", "24th", "26th", "28th", "30th"]
        },
        yAxis: { //y轴设置
            splitLine: {
                show: false
            }
        },
        series: [ //数据系列
            {
                name: 'This Week',
                barWidth: 20, //柱子的宽度
                showBackground: true, //显示背景色
                backgroundStyle: {
                    //color: '',
                    borderRadius: 20, //背景圆角
                },
                itemStyle: {
                    borderRadius: [20], //边框圆角 
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    {
                        offset: 0,
                        color: '#83bff6'
                    },
                    {
                        offset: 0.5,
                        color: '#188df0'
                    },
                    {
                        offset: 1,
                        color: '#188df0'
                    }
                ]),
                type: 'line', //'line' , 'bar' , 'pie'
                data: [100, 120, 170, 170, 180, 180, 160]
            },
            {
                name: 'Last Week',
                type: 'line', //'line' , 'bar' , 'pie'
                data: [60, 80, 70, 70, 80, 80, 100],
                symbolSize: 15, //圆点大小
                symbol: 'circle', //圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'pink', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                        borderColor: 'white', //圆点的边框颜色
                        lineStyle: {
                            width: 2
                        }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    });
    var rig = document.querySelector('#right');
    var a = echarts.init(rig);

    //2.绘制图表
    a.setOption({
        title: { //图表的标题
            text: 'Sales',
            left: 'left',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            data: ["JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
        },
        yAxis: { //y轴设置
            splitLine: {
                show: false
            }
        },
        series: [ //数据系列
            {
                name: 'This Week',
                barWidth: 20, //柱子的宽度
                showBackground: true, //显示背景色
                backgroundStyle: {
                    //color: '',
                    borderRadius: 20, //背景圆角
                },
                itemStyle: {
                    //borderRadius:[20,0,20,0],//边框圆角 
                    borderRadius: [20], //边框圆角 
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    {
                        offset: 0,
                        color: '#83bff6'
                    },
                    {
                        offset: 0.5,
                        color: '#188df0'
                    },
                    {
                        offset: 1,
                        color: '#188df0'
                    }
                ]),
                type: 'bar', //'line' , 'bar' , 'pie'
                data: [1000, 2000, 3000, 2500, 2700, 2500, 3000]
            },
            {
                name: 'Last Week',
                barWidth: 20,
                showBackground: true,
                backgroundStyle: {
                    borderRadius: 20,
                },
                itemStyle: {
                    borderRadius: [20],
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    {
                        offset: 0,
                        color: '#FF0000'
                    },
                    {
                        offset: 0.5,
                        color: '#B22222'
                    },
                    {
                        offset: 1,
                        color: '#8B0000'
                    }
                ]),

                type: 'bar', //'line' , 'bar' , 'pie'
                data: [800, 1700, 2600, 2000, 1800, 1500, 2000],


            }

        ]
    });



    render(data.list)

    //渲染表格数据
    function render(data) {
        var str = data.map((item, index) => {
            return `<tr>
                    <td>${item.name}</td>
                    <td>$${item.phone}USD</td>
                    <td>${item.money}Sold</td>
                    <td>more</td>
                </tr>`
        }).join('')
        document.querySelector('tbody').innerHTML = str;
    }
</script>